<template>
  <el-container style="text-align: right; font-size: 12px;height:100%">
    <!--********** 头部 -->
    <el-header style="height:auto;padding:0">
      <e-header></e-header>
    </el-header>
    <!--********** 主体 -->
    <el-main>
      <div class="mo_login">
        <!-- 登录身份选择 -->
        <div class="login_authentication" v-show="loginFirst == 1">
          <div @click="ceshiLogin">123</div>
          <div class="authentication_title">登录身份选择</div>
          <div
            class="authentication_choose"
            @click="centerDialogVisible = true"
          >
            <div class="notice-text">
              <div class="notice_img">
                <el-image :src="login_write" fit="cover"></el-image>
              </div>
              <div class="notice_name">
                <p class="addmouse">
                  <span>游客登录</span>
                </p>
              </div>
            </div>
            <div class="notice-biref text_more_Line_3">
              游客权限说明：权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明11111111111111111111111
            </div>
          </div>
          <!-- 二维码弹出 -->
          <el-dialog
            class="find-dialog"
            :visible.sync="centerDialogVisible"
            width="21%"
            center
            @close="showFrom()"
          >
            <!-- <el-image
              class="addspace"
              :src="erRCode_img"
              fit="cover"
            ></el-image> -->
            <e-WeixinLogin class="addspace"></e-WeixinLogin>
            <!-- <p class="find-dialog-p"><span>请使用微信扫描二维码登录</span></p>
            <p class="find-dialog-p"><span>三一重工机械行业整合平台</span></p> -->
          </el-dialog>

          <div
            class="authentication_choose"
            @click="centerDialogVisible = true"
          >
            <div class="notice-text">
              
              <div class="notice_img">
                <el-image :src="login_user" fit="cover"></el-image>
              </div>
              <div class="notice_name">
                <p class="addmouse">
                  <span>发布者登录</span>
                </p>
              </div>
            </div>
            <div class="notice-biref text_more_Line_3">
              游客权限说明：权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明权限说明11111111111111111111111
            </div>
          </div>
        </div>
        <!-- 注册认证选项 -->
        <div class="login_authentication" v-show="loginFirst == 2">
          <div class="authentication_title">完善个人信息</div>
          <div
            class="login_cont"
            v-loading="loading"
            element-loading-text="正在登录中...请稍等"
            element-loading-spinner="el-icon-loading"
            element-loading-background="#fff"
          >
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="90px"
              class="demo-ruleForm"
            >
              <el-form-item class="from-list" label="真实姓名" prop="username">
                <el-input
                  class="list-input"
                  v-model="ruleForm.username"
                  placeholder="请输入您的真实姓名"
                >
                </el-input>
              </el-form-item>
              <el-form-item class="from-list" label="联系方式" prop="username">
                <el-input
                  class="list-input"
                  v-model="ruleForm.username"
                  placeholder="请输入您的手机号码"
                >
                </el-input>
              </el-form-item>
              <el-form-item class="from-list" label="类别选择" prop="username">
                <el-select
                  v-model="Fromregion"
                  placeholder="请选择您所对应的类别"
                >
                  <el-option label="供应商" value="shanghai"></el-option>
                  <el-option label="采购商" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="from-list" label="公司名称" prop="username">
                <el-input
                  class="list-input"
                  v-model="ruleForm.username"
                  placeholder="请输入公司名称"
                >
                </el-input>
              </el-form-item>
              <el-form-item class="from-list" label="公司地址" prop="username">
                <el-input
                  class="list-input"
                  v-model="ruleForm.username"
                  placeholder="请输入公司地址"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                class="from-list-2"
                label="营业执照"
                prop="username"
              >
                <el-upload
                  class="addleft"
                  ref="upload_img"
                  action=""
                  accept="image/jpeg,image/jpg,image/png"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceedimg"
                  :limit="1"
                  :file-list="file_list"
                  :http-request="uploadSectionFile"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" class="addstyle">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>
              <el-form-item label-width="0px">
                <el-checkbox v-model="addchecked"></el-checkbox>
                <span class="location-left">
                  我已阅读
                </span>
                <span
                  class="location-left-2"
                  @click="centerDialogVisible2 = true"
                >
                  《入驻协议》
                </span>

                <!-- 二维码弹出 -->
                <el-dialog
                  class="find-dialog"
                  :visible.sync="centerDialogVisible2"
                  width="35%"
                  center
                  @close="showFrom2()"
                >
                  <p class="find-dialog-p">
                    <span>{{ aggreementName }}</span>
                  </p>
                  <p class="find-dialog-p" v-html="aggreementContent">
                    {{ aggreementContent }}
                  </p>
                </el-dialog>
              </el-form-item>
              <el-form-item class="from-submit" label-width="0px">
                <el-button type="danger" @click="submitForm('ruleForm')"
                  >下一步</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 注册认证费用 -->
        <div class="login_authentication" v-show="loginFirst == 3">
          <div class="authentication_title">认证费用提交</div>
          <div
            class="login_cont_2"
            v-loading="loading"
            element-loading-text="正在登录中...请稍等"
            element-loading-spinner="el-icon-loading"
            element-loading-background="#fff"
          >
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="90px"
              class="demo-ruleForm"
            >
              <el-form-item class="from-list" label="入驻费用" prop="username">
                <el-select v-model="Frommoney" placeholder="请选择入驻费用">
                  <el-option
                    v-for="(item, index) in settlein_fee"
                    :key="index"
                    :label="item.value"
                    :value="item.fee"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="from-submit" label-width="0px">
                <el-button type="danger" @click="submitForm('ruleForm')"
                  >费用支付</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- <div class="" v-show="loginFirst == 3" >
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="90px"
            class="demo-ruleForm"
          >
            <el-form-item class="from-list" label="入驻费用" prop="username">
              <el-select v-model="Frommoney" placeholder="请选择入驻费用">
                <el-option
                  v-for="(item, index) in settlein_fee"
                  :key="index"
                  :label="item.value"
                  :value="item.fee"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div> -->
      </div>
    </el-main>
    <!--********** 底部 -->
    <el-footer style="height:auto">
      <!-- <e-footer></e-footer> -->
    </el-footer>
  </el-container>
</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import eWeixinLogin from "@/components/public/WeixinLogin.vue";
import { throttle } from "../../common/public.js";
export default {
  components: {
    "e-header": eHeader,
    eFooter,
    eWeixinLogin,
    
  },
  data() {
    var validateUsername = (rule, value, callback) => {
      let reg3 = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/;
      if (value === "") {
        callback(new Error("请输入账号！"));
      } else if (!reg3.test(value)) {
        return callback(new Error("账号格式错误"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      // eslint-disable-next-line no-unused-vars
      let reg3 = /^\s*$/g;
      if (value === "") {
        callback(new Error("请输入密码！"));
      }
      // else if (!reg3.test(value)) {
      //     return callback(new Error("密码格式错误"));
      // }
      else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPassword");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }]
      },
      checked: false,
      loading: false,
      login_user: require("../../assets/images/login_user.png"),
      login_write: require("../../assets/images/login_write.png"),
      loginFirst: 1,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      erRCode_img: require("../../assets/images/erRCode.png"),
      addchecked: false,
      Fromregion: "",
      Frommoney: "",

      aggreementName: "",
      aggreementContent: "",
      settlein_fee: [],
      coverImg: "",

      router: this.$router,
    };
  },
  mounted() {
    //请求入驻协议
    this.Postaggreement();
    //请求认证费用
    this.Postsettleinfee();
  },


  methods: {

    // 测试
    ceshiLogin(){
      // alert(1215415)
      // http://jixie.kmmyxb.com.cn/?code=011fv9s60DTYZE1zW2s60rHbs60fv9sZ&state=undefined#/ma_user/login/redirect=%2F
      this.$router.push("/login/?code=011fv9s60DTYZE1zW2s60rHbs60fv9sZ&state=undefined#/ma_user/login/redirect=%2F");

      console.log(this.$route.query.code);
    },
    //显示from表单
    showFrom() {
      this.loginFirst = 2;
    },
    showFrom2() {
      this.centerDialogVisible2 = false;
    },
    //请求认证费用
    Postsettleinfee() {
      let _this = this;
      _this.$axios.post(_this.$basis + "/settlein_fee").then(res => {
        let data = res.data.data;
        let resdata = res.data;
        _this.settlein_fee = [];

        switch (resdata.code) {
          case 0:
            for (let i = 0; i < data.length; i++) {
              _this.settlein_fee.push({
                id: data[i].id,
                fee: data[i].fee,
                type: data[i].type,
                value: data[i].value
              });
            }
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //**********封面图片上传部分
    //文件超出个数限制时的钩子【判断上传的图片是否超过限制，超过提醒删除再进行上传】
    handleExceedimg: function() {
      this.$alert("图片最多上传一张，请删除再重新上传！", "", {
        showConfirmButton: false,
        callback: action => {}
      });
    },
    // 文件列表移除文件时的钩子
    handleRemove: function(file, fileList) {
      this.dialogImageUrl = "";
    },
    uploadSectionFile: function(params) {
      // 自定义上传方法
      let _this = this,
        file = params.file, //获取上传的文件
        fileType = file.type, //获取文件类型
        isImage = fileType.indexOf("image") != -1, // 判断是否是图片类型
        isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        // 判断大小
        alert("上传图片的大小不能超过 2MB!");
        _this.$refs.upload_img.uploadFiles = []; //不符合就清空已选择的图片
        return;
      }
      if (!isImage) {
        // 文件格式
        alert("请选择图片文件！");
        _this.$refs.upload_img.uploadFiles = []; //不符合就清空已选择的图片
        return;
      }
      if (isImage) {
        var img = new Image();
        //  一切验证通过后调用上传方法
        _this.uploadFile(file);
      }
    },
    //上传照片
    uploadFile: function(file) {
      // 上传的函数
      var _this = this;
      // let Url = "/start/picupload"
      let datas = new FormData();
      datas.append("file", file);
      _this.$axios
        .post(_this.$basis + "/imageup", datas, {
          headers: { "content-type": "multipart/form-data" }
        })
        .then(res => {
          // let resdata = res.data;
          console.log(res);
          if (res.data.code == 0) {
            //成功的话将数据插入data中
            _this.coverImg = res.data.src;
            _this.showError("success", "图片上传成功");
          } else {
            // 上传失败，清除已选择 内容 ，并提示失败原因
            _this.$refs.upload_img.uploadFiles = [];
            _this.file_list[0] = "";
            _this.showError("error", "图片上传异常，请重新上传图片");
          }
        });
    },
    //请求入驻协议
    Postaggreement() {
      let _this = this;
      let Params = {
        type: "settlein"
      };
      _this.$axios.post(_this.$basis + "/aggreement", Params).then(res => {
        let data = res.data.data;
        let resdata = res.data;
        switch (resdata.code) {
          case 0:
            _this.aggreementName = data.name;
            _this.aggreementContent = data.content;
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    },
    //认证信息提交
    submitForm: throttle(function(formName) {
      var _this = this;
      _this.loginFirst = 3;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.loading = true;
          let Params = {
            username: _this.ruleForm.username,
            password: _this.ruleForm.password
          };
          _this.$https.fetchPost("/login", Params).then(res => {
            let resdata = res.data;
            switch (resdata.code) {
              case 1000:
                let adddata = resdata.data;
                //传入账号名，密码，和保存天数3个参数
                sessionStorage.clear();
                localStorage.removeItem("accessName");
                localStorage.removeItem("accessId");
                localStorage.setItem(
                  "accessName",
                  resdata.data.name,
                  resdata.data.m_id
                );
                localStorage.setItem("accessId", resdata.data.m_id);
                localStorage.setItem("loginTime", new Date().getTime());
                _this.loading = false;
                _this.showError("success", "登录成功");
                _this.$router.push("/");
                break;
              case 1002:
                _this.loading = false;

                _this.showError("error", resdata.msg + "，请重新输入");
                sessionStorage.clear();

                break;
              case 1003:
                _this.loading = false;
                _this.showError("error", resdata.msg + "，请重新输入");
                sessionStorage.clear();

                break;
            }
          });
        } else {
          return false;
        }
      });
    }, 1000),
    //微信开放接口
    //     getWinxin().then(res=>{
    //      let data=ree.data.data;
    //     var obj = new WxLogin({

    //                               id:"login_container",

    //                               appid: data.appid,

    //                               scope: "",

    //                               redirect_uri: data.redirect_uri,

    //                               state: "",

    //                               style: "",

    //                               href: ""

    //                             });
    // }),
    //消息提示
    showError(type, status) {
      this.$message({
        type: type,
        showClose: true,
        center: true,
        message: status
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-container {
  overflow: hidden;
}
.el-main {
  overflow: hidden;
  padding: 0;
  border-radius: 0px;
  height: 55.7rem;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
  animation: bubble $send1 linear infinite,
    direction $send2 ease-in-out infinite alternate;
}
.mo_login {
  position: relative;
  width: 100%;
  padding-top: 226px;
  padding-left: 60%;
  height: 100%;
  overflow: hidden;
  background-image: url(../../assets/images/login_back.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 110%;

  .login_authentication {
    width: 60%;
    min-width: 315px;
    height: auto;
    text-align: left;
    .authentication_title {
      color: #333333;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
    }
    .authentication_choose {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      width: 100%;
      height: auto;
      padding: 100px 52px 0px 52px;
      background: #ffffff;
      .notice-text {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        background: #ee181e;
        padding-left: 26px;
        border-radius: 10px;
        cursor: pointer;
        .notice_img {
          width: 40px;
          height: 100%;
          padding: 11px 0px 10px 10px;
        }
        .notice_name {
          width: auto;
          height: 100%;
          padding: 15px 25px;
          font-size: 18px;
          color: #ffffff;
        }
      }
      .notice-biref {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 76px;
        //background: #ee181e;
        padding-left: 6px;
        padding-top: 15px;
        border-radius: 10px;
        font-size: 14px;
        color: #999999;
      }
    }
    .find-dialog {
      margin-top: 14vh;
      //width: 5%;
      height: 100%;

      .addspace {
        width: 100%;
        //height: 100%;
        height: 390px;
        padding: 0px 0px 15px 0;
      }
      .find-dialog-p {
        font-size: 14px;
        color: #000000;
        text-align: center;
        padding-bottom: 5px;
      }
      .el-dialog /deep/ .el-dialog__footer {
        padding: 0;
      }
    }
  }

  .login_cont {
    margin: 0 auto;
    padding: 30px 25px 28px 5px;
    width: 60%;
    min-width: 315px;
    height: 360px;
    border-radius: 0px;
    background: #ffffff;
    //box-shadow: $shadow-color;
    .el-form {
      .from-list {
        width: 100%;
        height: 44px;
        //padding-top: 6px;
        border-bottom: 1px solid #f6f6f6;
        .el-input__inner {
          border: none;
          line-height: 44px;
        }
      }
      .from-list-2 {
        width: 385px;
        height: 143px;
        //padding-top: 6px;
        border-bottom: 1px solid #f6f6f6;
        .el-input__inner {
          border: none;
          line-height: 44px;
        }
      }
      .from-submit {
        margin-left: 0px;
      }
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 0px;
      }
      .el-form-item__label {
        color: $btn-color;
        color: $btn-color;
      }
      .login_sub {
        text-align: center;
      }
      .el-button {
        width: 100%;
        font-size: 14px;
        border-radius: 7px;
      }
    }
    .el-form /deep/ .el-input__inner {
      border: none;
    }
    .login_addtitle {
      width: 100%;
      height: 30px;
      font-size: 20px;
      color: #1445ab;
      margin-bottom: 25px;
      text-align: center;
    }
    .login_addtitle p {
      letter-spacing: 10px;
    }
  }
  .login_cont_2 {
    margin: 0 auto;
    padding: 160px 25px 28px 5px;
    width: 60%;
    min-width: 315px;
    height: 360px;
    border-radius: 0px;
    background: #ffffff;
    //box-shadow: $shadow-color;
    .el-form {
      .from-list {
        width: 100%;
        height: 44px;
        //padding-top: 6px;
        border-bottom: 1px solid #f6f6f6;
        .el-input__inner {
          border: none;
          line-height: 44px;
        }
      }
      .from-list-2 {
        width: 385px;
        height: 143px;
        //padding-top: 6px;
        border-bottom: 1px solid #f6f6f6;
        .el-input__inner {
          border: none;
          line-height: 44px;
        }
      }
      .from-submit {
        margin-left: 0px;
        padding-top: 50px;
      }
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 0px;
      }
      .el-form-item__label {
        color: $btn-color;
        color: $btn-color;
      }
      .login_sub {
        text-align: center;
      }
      .el-button {
        width: 100%;
        font-size: 14px;
        border-radius: 7px;
      }
    }
    .el-form /deep/ .el-input__inner {
      border: none;
    }
    .login_addtitle {
      width: 100%;
      height: 30px;
      font-size: 20px;
      color: #1445ab;
      margin-bottom: 25px;
      text-align: center;
    }
    .login_addtitle p {
      letter-spacing: 10px;
    }
  }
}

.el-checkbox {
  float: left;
  padding: 0 5px 0 10px;
}
.el-checkbox /deep/ .el-checkbox__inner {
  border-radius: 10px;
  padding: 0 5px;
}

.location-left {
  width: 20%;
  float: left;
  text-align: left;
  font-size: 12px;
  color: #909399;
  cursor: pointer;
}
.location-left-2 {
  width: 28%;
  float: left;
  text-align: left;
  font-size: 12px;
  color: #ee181e;
  cursor: pointer;
}

.location-left :hover {
  color: #558ffb;
  text-decoration: underline;
}
.location-right {
  width: 50%;
  float: left;
  text-align: right;
  font-size: 12px;
  color: #909399;
  cursor: pointer;
}
.location-right :hover {
  color: #558ffb;
  text-decoration: underline;
}
.el-form-item {
  margin-right: 25px;
  margin-left: -5px;
}

.el-form /deep/ .el-input__icon {
  color: #85ce61;
}

.textOut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_more_Line {
  overflow: hidden;
  text-overflow: ellipsis;
  //white-space: nowrap;禁止换行
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text_more_Line_3 {
  overflow: hidden;
  text-overflow: ellipsis;
  //white-space: nowrap;禁止换行
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text_more_Line_4 {
  overflow: hidden;
  text-overflow: ellipsis;
  //white-space: nowrap;禁止换行
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.addleft {
  padding-left: 15px;
  // width: 128px;
  // height: 128px;
}
.addleft /deep/ .el-upload--picture-card {
  width: 128px;
  height: 128px;
}

.addleft /deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 128px;
  height: 128px;
}
</style>
